<template>
  <view class="pages">
    <h-line :height="tops" bgColor="#fff"></h-line>
    <view class="headerBox">
      <u-icon name="arrow-left" color="#333333" size="20" @click="toUp"></u-icon>
      <view class="searchBox">
        <view class="searchIcon">
          <u-icon name="search" color="#BDBDBD" size="24"></u-icon>
        </view>
        <input
          type="text"
          placeholder="请输入您要搜索的内容"
          placeholder-style="font-size: 28rpx;color: #999999;"
          @focus="toUp"
          :maxlength="26"
          v-model="searchValue"
        />
        <view class="closeIcon" v-if="searchValue" @click="toClearUp">
          <u-icon name="close-circle-fill" color="#BDBDBD" size="18"></u-icon>
        </view>
      </view>
    </view>
    <h-line height="20" bgColor="#F6F6F6"></h-line>
    <view class="section">
      <view class="sec_list" v-for="(item, index) in itemList" :key="index">
        <image :src="item.icon" class="sec_list_img"></image>
        <view class="sec_list_box">
          <view class="sec_list_box_l">
            <view class="sec_list_box_l_t">{{ item.name }}</view>
            <view class="sec_list_box_l_b">{{ item.num_one || 1 }}{{ item.unit_one }}</view>
          </view>
          <view class="sec_list_box_r">
            <image src="@/static/yunchan/weight/aa.png" v-show="item?.is_add"></image>
            <image
              src="@/static/yunchan/weight/bb.png"
              v-show="!item?.is_add"
              @click="toCheck(index, itemList)"
            ></image>
          </view>
        </view>
      </view>
      <view class="sec_none" v-show="itemList.length == 0">
        <image src="@/static/yunchan/weight/none.png"></image>
        <view class="sec_none_text">抱歉暂未找到相关搜索结果</view>
      </view>
    </view>
    <u-popup :show="addShow" mode="bottom" @close="addShow = false" closeable :round="10">
      <view class="add_box">
        <view class="topCen" @click=";(timeShow = true), (addShow = false)">
          <view class="head_data" style="font-size: 28rpx">
            {{ formatDate(new Date(recordTime), 'MM月DD日') }} {{ mealType[recordIndex].name }}
            <image src="@/static/baby/sanjiao.png" class="head_data_img" style="top: -4rpx"></image>
          </view>
        </view>
        <h-num-keyboard
          type="meal"
          :title="addDetail?.name"
          :imgUrl="addDetail?.icon"
          :num="mealNum"
          :unit="addDetail?.unit_one"
          @bind="bindNum"
        ></h-num-keyboard>
      </view>
    </u-popup>
    <h-login ref="login" @updateInfo="updateInfo"></h-login>
    <!--头部切换日期和餐项-->
    <u-popup :show="timeShow" mode="bottom" @close="timeShow = false" closeable :round="10">
      <view class="time_box">
        <view class="time_box_title">
          {{ formatDate(new Date(recordTime), 'MM月DD日') }} {{ mealType[recordIndex].name }}
        </view>
        <picker-view
          :value="changeTime"
          :indicator-style="indicatorStyle"
          @change="bindChangeTime"
          class="picker-view"
        >
          <picker-view-column>
            <view class="item" v-for="(item, index) in articleList" :key="index">{{
              item.label
            }}</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in mealType" :key="index">{{ item.name }}</view>
          </picker-view-column>
        </picker-view>
        <view class="time_box_btn" @click="toBind(), (addShow = true)">确定</view>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import { formatDate } from '@/utils/utils'
import { useMemberStore, useSystemStore } from '@/stores'
import { ref, onMounted, watch } from 'vue'
import {
  onLoad,
  onPullDownRefresh,
  onReachBottom,
  onReady,
  onShow,
  onPageScroll,
  onUnload,
  onHide,
  onBackPress,
} from '@dcloudio/uni-app'
import { navigateTo, navigateBack } from '@/utils/index'
import { ycDietAddDiet, ycDietSearchDietList, ycDietRecordStartDate } from '@/api/weight/index.js'
const login = ref(null) // 登录组件实例
const store = useMemberStore()
var token = store?.token
const tops = ref(0)
const searchValue = ref('')
const params = ref({
  page: 1,
  limit: 10,
  keyword: '',
})
const articleList = ref([])
const mealType = ref([
  {
    name: '早餐',
    icon: '/static/yunchan/weight/foot/a.png',
    icons: '/static/yunchan/weight/foot/aa.png',
    number: 10,
  },
  {
    name: '午餐',
    icon: '/static/yunchan/weight/foot/b.png',
    icons: '/static/yunchan/weight/foot/ba.png',
    number: 16,
  },
  {
    name: '晚餐',
    icon: '/static/yunchan/weight/foot/c.png',
    icons: '/static/yunchan/weight/foot/ca.png',
    number: 0,
  },
  {
    name: '早加餐',
    icon: '/static/yunchan/weight/foot/a.png',
    icons: '/static/yunchan/weight/foot/aa.png',
    number: 20,
  },
  {
    name: '午加餐',
    icon: '/static/yunchan/weight/foot/b.png',
    icons: '/static/yunchan/weight/foot/ba.png',
    number: 4,
  },
  {
    name: '晚加餐',
    icon: '/static/yunchan/weight/foot/c.png',
    icons: '/static/yunchan/weight/foot/ca.png',
    number: 20,
  },
])
const indicatorStyle = ref('height: 50px;color:#333;')
const timeShow = ref(false)
const itemList = ref([])
const dateTime = ref('')
const recordTime = ref('')
const addShow = ref(false)
const addDetail = ref({})
const mealNum = ref('')
const addIndex = ref(0)
const mealIndex = ref(0)
const recordIndex = ref(0)
const newDateTime = ref(formatDate(new Date(), 'YYYY-MM-DD'))
var props = defineProps({
  searchValue: String,
  dateTime: String,
  meal: String,
})
const changeTime = ref([0, 0])
function bindChangeTime(e) {
  changeTime.value = e.detail.value
}

function toBind() {
  var a = changeTime.value[0]
  var b = changeTime.value[1]
  recordTime.value = articleList.value[a].value
  recordIndex.value = b
  timeShow.value = false
}
async function getLastYearToTodayDates() {
  var res = await ycDietRecordStartDate({ type: 1 })
  var date = res.data.date ? res.data.date : newDateTime.value
  let today = new Date(date)
  let startDate = new Date(today.getFullYear(), 0, 1)
  let newday = new Date()
  let endDate = new Date(newday.getFullYear(), 11, 31)
  let dates = []
  while (startDate <= endDate) {
    let date1 = formatDate(startDate, 'YYYY/MM/DD')
    let date2 = formatDate(startDate, 'YYYY-MM-DD')
    if (newDateTime.value == date2) {
      dates.push({
        label: '今天',
        value: date2,
        dateTime: date2,
      })
    } else {
      dates.push({
        label: date1,
        value: date2,
        dateTime: date2,
      })
    }
    startDate.setDate(startDate.getDate() + 1)
  }
  return dates
}
searchValue.value = props?.searchValue
//登录
function updateInfo() {
  const store = useMemberStore()
  token = store?.token
}

onBackPress((o) => {
  console.log('from:' + o)
  return false
})
onReady(() => {
  uni.getSystemInfo({
    success: (e) => {
      tops.value = e.statusBarHeight * 2
    },
  })
})
onShow(async () => {
  if (props?.searchValue) {
    params.value.keyword = props?.searchValue
  }
  if (props?.dateTime) {
    articleList.value = await getLastYearToTodayDates()
    var time = props.dateTime
    if (time) {
      dateTime.value = time
      recordTime.value = time
      var list = articleList.value
      for (var i in list) {
        if (time == list[i].dateTime) {
          changeTime.value[0] = Number(i)
        }
      }
    }
  }
  if (props?.meal) {
    mealIndex.value = Number(props.meal)
    recordIndex.value = Number(props.meal)
  }
  getList()
})

function toUp() {
  uni.redirectTo({
    url:
      '/pregnancys/weight-management/diet-record/search?keywords=' +
      searchValue.value +
      '&dateTime=' +
      props.dateTime +
      '&meal=' +
      props.meal,
  })
}

function toClearUp() {
  uni.redirectTo({
    url:
      '/pregnancys/weight-management/diet-record/search?keywords=&dateTime=' +
      props.dateTime +
      '&meal=' +
      props.meal,
  })
}
async function getList() {
  uni.showLoading({
    title: '加载中',
  })

  var res = await ycDietSearchDietList({
    keywords: props?.searchValue,
    meal: props?.meal,
    data: props?.dateTime,
  })
  uni.hideLoading()
  itemList.value = res.data.data
}

function toCheck(index, list) {
  const row = list[index]
  addDetail.value = row
  mealNum.value = row.num_one.toString()
  addShow.value = true
  addIndex.value = index
}
async function bindNum(e) {
  mealNum.value = ''
  var res = await ycDietAddDiet({
    id: addDetail.value.id,
    cate_id: addDetail.value.cate_id,
    num: Number(e.num),
    date: recordTime.value,
    unit: e.unit,
    meal: mealIndex.value,
  })
  getList()
  addShow.value = false
}
</script>

<style lang="scss" scoped>
.topCen {
  width: 350rpx;
  margin: 0 auto;
  height: 100%;
  z-index: 1;
  padding: 10rpx 0;
  box-sizing: border-box;
  .head_data {
    width: 300rpx;
    margin: 0 auto;
    height: 64rpx;
    font-size: 36rpx;
    font-family: PingFang-SC-Heavy, PingFang-SC;
    font-weight: 800;
    color: #333333;
    line-height: 64rpx;
    text-align: center;
    .head_data_img {
      width: 18rpx;
      height: 12rpx;
      margin-left: 10rpx;
      position: relative;
      top: -6rpx;
    }
  }
}
.headerBox {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  position: sticky;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 9999;
  .searchBox {
    margin-left: 20rpx;
    width: 639rpx;
    height: 64rpx;
    background: #f6f6f6;
    border-radius: 32rpx;
    position: relative;
    input {
      width: 639rpx;
      height: 64rpx;
      background: #f6f6f6;
      border-radius: 32rpx;
      padding: 0rpx 70rpx 0rpx 76rpx;
      font-size: 28rpx;
      color: #333333;
    }
    .searchIcon {
      position: absolute;
      left: 20rpx;
      top: 9rpx;
    }
    .closeIcon {
      position: absolute;
      right: 20rpx;
      top: 14rpx;
      z-index: 10;
    }
  }
}

.section {
  .sec_list {
    border-bottom: 2rpx solid #f6f6f6;
    padding: 30rpx;
    overflow: hidden;
    .sec_list_img {
      width: 83rpx;
      height: 83rpx;
      border-radius: 18rpx;
      float: left;
    }
    .sec_list_box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 587rpx;
      float: right;
      .sec_list_box_l {
        max-width: 340rpx;
        .sec_list_box_l_t {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          line-height: 40rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .sec_list_box_l_b {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #666666;
          line-height: 28rpx;
          line-height: 34rpx;
          margin-top: 9rpx;
        }
      }
      .sec_list_box_r {
        width: 44rpx;
        padding: 15rpx 0;
        image {
          width: 44rpx;
          height: 44rpx;
        }
      }
    }
  }
  .sec_list:last-of-type {
    border-bottom: none;
  }
  .sec_none {
    text-align: center;
    image {
      width: 226rpx;
      height: 204rpx;
      margin-top: 400rpx;
    }
    .sec_none_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #ababab;
      line-height: 36rpx;
      margin-top: 60rpx;
    }
  }
}
.time_box {
  width: 100%;
  .time_box_title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 28rpx;
    color: #333333;
    line-height: 33rpx;
    text-align: center;
    padding-top: 30rpx;
    padding-bottom: 20rpx;
  }
  .picker-view {
    width: 750rpx;
    height: 500rpx;
  }
  .item {
    width: 375rpx;
    line-height: 85rpx;
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #333333;
  }
  .time_box_btn {
    width: 702rpx;
    height: 88rpx;
    background: linear-gradient(90deg, #cb9fff 0%, #a28aff 100%);
    border-radius: 44rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
    margin: 50rpx auto;
  }
}
</style>
